<template>
  <van-row class="Commodity" @click="handlerClick">
    <van-col span="8" offset="1" class="picture">
            <van-image
                width="120"
                height="120"
                lazy-load
                :src='props.data.thumb'
            />
    </van-col>
    <van-col span="14" class="content">
      <div class="title">
        <span>10人团</span>
<!--        美的(Midea)破壁机高速加热破壁机智能菜...-->
        {{props.data.title}}
      </div>
      <div class="desc">
        <p>
          <span>￥{{props.data.price}}</span>
          <span>
          单价买<del>￥{{props.data.origin_price}}</del>
        </span>
        </p>
        <p>已拼{{props.data.num}}件</p>
      </div>
      <div class="participation">
        <div>
          <p>一人的折扣商品</p>
          <p>9人瓜分 <span>￥12.00</span>参与奖</p>
        </div>
          <van-button
              class="click"
            color="linear-gradient(to right, #f28c29, #fc654e)"
            size="small"
          >
            立即参与
          </van-button>
      </div>
    </van-col>
  </van-row>
</template>

<script setup lang="ts">
// import {defineProps} from "vue";
import { useRouter } from 'vue-router'
import {Ilist} from "@/components/Nav/Recommend/Heat/index.vue";

const props = defineProps<{
  data:Ilist
}>()

const router = useRouter()
function handlerClick(){
  router.push(props.data.link)
}

</script>

<style scoped lang="scss">
.Commodity{
  margin-bottom: 20px;
}
.picture{
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.content{
  display: flex;
  justify-content: space-around;
  flex-direction: column;

  .title{
    font: {
      size: 14px;
      weight: 600;
    }
    span{
      font-size: 12px;
      background-color: red;
      color: white;
      display: inline-block;
      width: 50px;
      text-align: center;
      border-radius: 4px;
    }
  }

  .desc{
    margin:   0;
    &>p>span:first-child{
      color: red;
      font: {
        size: 16px;
        weight: 600;
      }
      margin-right:2px;
    }
    &>p>span:last-of-type,p{
      color: gray;
      font: {
        size: 12px;
        weight: 530;
      }
    }
    p{
      margin: 0;

    }
  }
  .participation{
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #faecdd;
    border-radius: 5px;
    font: {
      size: 12px;
    }
    color: #e97247;
  }
  p{
    margin: 0;
  }
  div{
    padding: 3px 0px 3px 3px;
  }
  .click{
    margin-right: 5px;
  }
}



</style>